Fluid Type Scale Calculator

Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any design system.

Minimum (Mobile) At this minimum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio.

Base font size (px) Screen width (px) Type scale ratio

Maximum (Desktop) At this maximum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio.

Base font size (px) Screen width (px) Type scale ratio

Type scale Provide a comma-separated list of names for each step in your type scale, in ascending order of font size. Use any convention you want. Be sure to also identify the name of your base step.

All steps Baseline step

Variable prefix Use your preferred naming convention for the output CSS variables. Allowed characters: a-z,A-Z,0-9,_,- Rounding The maximum number of decimal places in the output. Use container inline size (cqi) instead of viewport width Note: Container queries may not be supported by all browsers. Include fallback CSS Fall back to media queries if the browser doesn't support clamp. Use rems instead of pixels for font size It's recommended that you use rems for font size to respect user preferences in browser settings. Rem value (pixels) The pixel value of 1rem. Defaults to 16px in all browsers but can be changed with CSS. For example, if you set your root font size to 62.5%, then 1rem equals 10px.

--fs-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
--fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
--fs-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
--fs-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
--fs-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
--fs-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
--fs-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

Preview your type scale

Font family Preview text Screen width (px)

Step	Min	Max	Rendered	Preview
sm	0.8rem	0.89rem	0.89rem	Almost before we knew it, we had left the ground
base	1rem	1.19rem	1.19rem	Almost before we knew it, we had left the ground
md	1.25rem	1.58rem	1.58rem	Almost before we knew it, we had left the ground
lg	1.56rem	2.11rem	2.11rem	Almost before we knew it, we had left the ground
xl	1.95rem	2.81rem	2.81rem	Almost before we knew it, we had left the ground
xxl	2.44rem	3.75rem	3.75rem	Almost before we knew it, we had left the ground
xxxl	3.05rem	5rem	5rem	Almost before we knew it, we had left the ground

About this tool

Design systems traditionally used static type scales, where the steps in the scale are not dependent on the viewport or container width. This means that developers have to write media queries to switch font sizes at mobile, tablet, and desktop breakpoints. But in practice, there are innumerable device widths and orientations, so there are always going to be edge cases where your font sizes are either too large or too small.

By contrast, in a fluid type scale, each step has a minimum, maximum, and variable (viewport-dependent) font size. We can use CSS clamp and viewport width (vw) units to generate a set of font size variables that scale linearly. This means you no longer need to worry about fine-tuning your typography for discrete device widths: Just pick your minima and maxima, and the font sizes will scale fluidly in between.

Learn more

Creating a Fluid Type Scale with CSS Clamp by yours truly! A deep dive into the math behind this technique.
Modern Fluid Typography Editor, a handy tool by Adrian Bece that allows you to visualize a CSS clamp declaration.
Type Scale - A Visual Calculator by Jeremy Church.
Utopia Fluid Type Scale Calculator by James Gilyead and Trys Mudford.
Consistent, Fluidly Scaling Type and Spacing by Andy Bell.